// 这个permission模块是关于权限控制的模块(前置导航守卫), 这个模块我们自己写
// 导入路由
import router from '@/router'
// 导入store
import store from '@/store'
// 导入nprogress
import NProgress from 'nprogress'
// 导入nprogress样式
import 'nprogress/nprogress.css'
import { asyncRoutes } from '@/router/index'
console.log(asyncRoutes)
// 使用前置导航守卫控制页面的访问权限
// to 要去哪  from 是从哪来 next 放行函数 next('/login')
// to 和 from是路由信息对象
// 白名单列表
const whiteList = ['/login', '/404']
router.beforeEach(async(to, from, next) => {
  // console.log(store.getters.token)
  // 开启nprogress进度条
  NProgress.start()
  // 1. 先判断是否有token
  if (store.getters.token) {
    // 1.1 先判断是否去登录页面, 如果去的是登录页面, 直接强制跳转到主页
    if (to.path === '/login') {
      NProgress.done()
      next('/') // 被next强制拦截的页面不会经过后置导航守卫, 需要手动再关闭progress
    } else {
      // 1.2 登录过访问别的的页面 直接放行
      console.log('先取个人资料')
      // 先发送请求获取个人资料
      // 处理频繁切换路由频繁获取个人资料 判断name有没有值, 没有值再去发送请求
      if (!store.getters.name) {
        const { roles } = await store.dispatch('user/getUserInfo')
        // console.log(roles) // - 挖坑 res中有一个menus数组,就是当前登录的用户的权限列表,后期会在这个位置处理权限相关的业务
        // addRoutes 是给路由添加规则的方法,addRoutes添加的路由规则不是响应式的
        const filterRoutes = asyncRoutes.filter(item => roles.menus.includes(item.children[0].name))
        console.log(filterRoutes)
        router.addRoutes(filterRoutes)
        // 将过滤的有权限的路由 新增到vuex中
        store.commit('permission/setRoutes', filterRoutes)
        // addRoutes有一个已知问题,使用addRoutes方法添加路由规则, 页面刷新会白屏
        next(to.path)
        // 本身要出门, 打开门之后没有路, 手动铺一条路出来
      }
      // 再放行
      next()
    }
  } else {
    // 1.3没有token的情况, 并且访问的是白名单页面直接放行
    if (whiteList.includes(to.path)) {
      next()
    } else {
      NProgress.done()
      // 1.4 没有token还访问有权限的页面 强制登录
      next('/login')
    }
  }
})
// 路由后置导航守卫
router.afterEach((to, from) => {
  // 关闭进度条
  // console.log('经过了后置导航守卫')
  NProgress.done()
})
